
{%- liquid
  if new
    assign tag = 'New'
  else
    assign tag = address.id | prepend: '_'
  endif
-%}

<div class="row row-cols-1 row-cols-lg-2 gx-0 gx-lg-3 gy-3 gy-lg-0 my-3 my-lg-4 mt-0">
  <div class="col form-pristine">
    <label class="form-label small" for="AddressFirstName{{ tag }}"><span class="text-primary">*</span>{{ 'customer.my_addresses.first_name' | t }}</label> 
    <input data-pristine-required-message="{{ 'customer.my_addresses.first_name' | t }} {{ 'system.errors.invalid' | t }}" class="form-control input-pristine" type="text" id="AddressFirstName{{ tag }}" name="address[first_name]" value="{{ form.first_name }}" autocomplete="given-name" placeholder="{{ 'customer.my_addresses.first_name' | t }}" required>
  </div>
  <div class="col form-pristine">
    <label class="form-label small" for="AddressLastName{{ tag }}"><span class="text-primary">*</span>{{ 'customer.my_addresses.last_name' | t }}</label>
    <input data-pristine-required-message="{{ 'customer.my_addresses.last_name' | t }} {{ 'system.errors.invalid' | t }}" class="form-control input-pristine" type="text" id="AddressLastName{{ tag }}" name="address[last_name]" value="{{ form.last_name }}" autocomplete="family-name" placeholder="{{ 'customer.my_addresses.last_name' | t }}" required>
  </div>
</div>
<div class="my-3 my-lg-4 form-pristine">
  <label class="form-label small" for="AddressAddress1{{ tag }}"><span class="text-primary">*</span>{{ 'customer.my_addresses.address1' | t }}</label>
  <input data-pristine-required-message="{{ 'customer.my_addresses.address1' | t }} {{ 'system.errors.invalid' | t }}" class="form-control input-pristine" type="text" id="AddressAddress1{{ tag }}" name="address[address1]" value="{{ form.address1 }}" autocomplete="address-line1" placeholder="{{ 'customer.my_addresses.address1' | t }}" required>
</div>
<div class="my-3 my-lg-4 form-pristine">
  <label class="form-label small" for="AddressAddress2{{ tag }}">{{ 'customer.my_addresses.address2' | t }}</label>
  <input class="form-control" type="text" id="AddressAddress2{{ tag }}" name="address[address2]" value="{{ form.address2 }}" autocomplete="address-line2" placeholder="{{ 'customer.my_addresses.address2' | t }}"> 
</div>
<div class="row row-cols-1 row-cols-lg-2 gx-0 gx-lg-3 gy-3 gy-lg-4">
  <div class="col form-pristine">
    <label class="form-label small" for="AddressCity{{ tag }}"><span class="text-primary">*</span>{{ 'customer.my_addresses.city' | t }}</label>
    <input data-pristine-required-message="{{ 'customer.my_addresses.city' | t }} {{ 'system.errors.invalid' | t }}" class="form-control input-pristine" type="text" id="AddressCity{{ tag }}" name="address[city]" value="{{ form.city }}" autocomplete="address-level2" placeholder="{{ 'customer.my_addresses.city' | t }}" required>
  </div>
  <div class="col form-pristine">
    <label class="form-label small" for="AddressCountry{{ tag }}"><span class="text-primary">*</span>{{ 'customer.my_addresses.country' | t }}</label>
    <select
      class="form-select input-pristine"
      id="AddressCountry{{ tag }}"
      name="address[country]"
      data-default="{{ form.country }}"
      autocomplete="country"
      {% unless new %} data-address-country-select data-form-id="{{ form.id }}"{% endunless %}
    >
      {{ all_country_option_tags }}
    </select>
  </div>
  <div class="col form-pristine" id="AddressProvinceContainer{{ tag }}" style="display: none">
    <label class="form-label small" for="AddressProvince{{ tag }}"><span class="text-primary">*</span>{{ 'customer.my_addresses.province' | t }}</label>
    <select
      class="form-select input-pristine"
      id="AddressProvince{{ tag }}"
      name="address[province]"
      data-default="{{ form.province }}"
      autocomplete="address-level1"
    >
    </select>
  </div>
  <div class="col form-pristine">
    <label class="form-label small" for="AddressZip{{ tag }}"><span class="text-primary">*</span>{{ 'customer.my_addresses.zip' | t }}</label>
    <input data-pristine-required-message="{{ 'customer.my_addresses.zip' | t }} {{ 'system.errors.invalid' | t }}" class="form-control input-pristine" type="text" id="AddressZip{{ tag }}" name="address[zip]" value="{{ form.zip }}" autocapitalize="characters" autocomplete="postal-code" placeholder="{{ 'customer.my_addresses.zip' | t }}" required>  
  </div>
  <div class="col form-pristine">
    <label class="form-label small" for="AddressPhone{{ tag }}"><span class="text-primary">*</span>{{ 'customer.my_addresses.phone' | t }}</label>
    <input data-pristine-required-message="{{ 'customer.my_addresses.phone' | t }} {{ 'system.errors.invalid' | t }}" class="form-control input-pristine" type="tel" id="AddressPhone{{ tag }}" name="address[phone]" value="{{ form.phone }}" autocomplete="tel" placeholder="{{ 'customer.my_addresses.phone' | t }}" required>  
  </div>
</div>